<template>
  <mt-popup v-model="visible" position="bottom" class="mint-datetime">
    <mt-picker :slots="slots" valueKey='text' @change="onValuesChange" 
    class="mint-datetime-picker"
    ref="pickerym"
    show-toolbar>
    <span class="mint-datetime-action mint-datetime-cancel" @click="visible = false">取消</span>
    <span class="mint-datetime-action mint-datetime-confirm" @click="confirm">确定</span>
    </mt-picker>
  </mt-popup>
</template>
<script>
  export default {
    data () {
      return {
        visible: false,
        slots: [
          {
            flex: 1,
            values: [
              {text: '2010年', value: 2010},
              {text: '2011年', value: 2011},
              {text: '2012年', value: 2012},
              {text: '2013年', value: 2013},
              {text: '2014年', value: 2014},
              {text: '2015年', value: 2015},
              {text: '2016年', value: 2016},
              {text: '2017年', value: 2017},
              {text: '2018年', value: 2018},
              {text: '2019年', value: 2019}
              // 2016, 2017, 2018
            ],
            className: 'slot1',
            textAlign: 'center'
          }, {
            flex: 1,
            values: [
              {text: '1月', value: 1},
              {text: '2月', value: 2},
              {text: '3月', value: 3},
              {text: '4月', value: 4},
              {text: '5月', value: 5},
              {text: '6月', value: 6},
              {text: '7月', value: 7},
              {text: '8月', value: 8},
              {text: '9月', value: 9},
              {text: '10月', value: 10},
              {text: '11月', value: 11},
              {text: '12月', value: 12}
            ],
            valueKey: 'text',
            className: 'slot3',
            textAlign: 'center'
          }
        ],
        crtval: ''
      };
    },
    methods: {
      open () {
        this.visible = true;
        this.$refs.pickerym.setSlotValue(0, this.slots[0].values[7]);
        for (var i = 0; i < this.slots[0].values.length; i++) {
          if (this.slots[0].values[i].value === this.$store.state.mintUI.pickerymValue[0]) {
            this.$refs.pickerym.setSlotValue(0, this.slots[0].values[i]);
          }
        }
        for (var j = 0; j < this.slots[1].values.length; j++) {
          if (this.slots[1].values[j].value === this.$store.state.mintUI.pickerymValue[1]) {
            this.$refs.pickerym.setSlotValue(1, this.slots[1].values[j]);
          }
        }
      },
      onValuesChange (picker, values) {
        // picker.setSlotValue(0, {text: '2015年', value: 2015});
        // this.$refs.pickerym.setSlotValue(0, '2016年');
        this.crtval = values;
      },
      confirm () {
        this.visible = false;
        this.$store.state.mintUI.pickerymCallback(this.crtval);
      }
    },
    mounted: function () {
      this.$store.dispatch('setPickerym', this);
    }
  };
</script>
